<template>
	<view class="swiper-item yb-flex yb-flex-1">
		<template v-if="item.type == 'broadcast'">
			<view class="yb-flex yb-flex-1 yb-justify-center" v-if="visible">
				<web-view ref="webview" style="height: 450rpx;" src="/hybrid/html/audio.html"></web-view>
			</view>
		</template>
		<template v-else>
			<video
			:controls="false"
			autoplay
			ref="video"
			v-if="visible"
			class="yb-flex-1"
			:src="item.src"></video>
			<rd-image :style="{
				opacity: visible ? 0 : 1
			}" class="cover" :src="item.cover" mode="aspectFit"></rd-image>
		</template>
		<view class="mask"></view>
		<view class="bottom-info yb-flex padding-gap">
			<yb-text :lines="1" custom-style="margin-bottom: 10rpx" :size="30" :color="skinColor.color_white" :value="'@' + (item.creator || app.$business.filterSource(item.source).title)" />
			<view class="yb-flex yb-row yb-wrap">
				<yb-tap v-for="(tag, i) in item.tag" :key="i" stop @click="app.$business.showTaglist(tag, item.type)">
					<yb-tag :options="{
						bgColor: app.$utils.hex2rgba(skinColor.color_white, .8),
						color: 'rgba(0,0,0,.5)'
					}" custom-style="margin-right: 10rpx;margin-bottom: 10rpx" :value="tag"></yb-tag>
				</yb-tap>
			</view>
			<yb-text v-if="item.title" :lines="1" custom-style="margin-top: 10rpx" :size="30" :color="app.$utils.hex2rgba(skinColor.color_white, .8)" :value="item.title" />
		</view>
		<view class="detail yb-flex yb-align-center">
			<yb-button :options="{
				bgColor: skinColor.color_white,
				size: '22rpx',
				radius: '10rpx'
			}" @click="app.$business.openDetail(item)" custom-class="detail-btn" plain :value="'进入' + app.$business.getType(item.type) + '间'"></yb-button>
		</view>
	</view>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		beforeDestroy() {
			if ( this.initTimer ) {
				clearTimeout(this.initTimer)
				this.initTimer = null
			}
		},
		mounted() {
			this.$nextTick(function () {
				if ( this.visible && this.item.src ) {
					this.init()
				}
			})
		},
		methods: {
			init () {
				if ( this.initTimer ) {
					clearTimeout(this.initTimer)
					this.initTimer = null
				}
				this.$refs.webview && this.$refs.webview.evalJS(`switchAudio('${this.item.src}', '${this.item.title}', '${this.item.cover}')`)
			},
			play () {
				this.$refs.webview && this.$refs.webview.evalJS('play();')
				this.$refs.video && this.$refs.video.play()
			},
			pause () {
				this.$refs.webview && this.$refs.webview.evalJS('pause();')
				this.$refs.video && this.$refs.video.pause()
			},
			stop () {
				this.$refs.webview && this.$refs.webview.evalJS('stop();')
				this.$refs.video && this.$refs.video.stop()
			}
		},
		watch: {
			visible (newVal) {
				this.$nextTick(function () {
					if ( newVal && this.item.src ) {
						if ( this.initTimer ) {
							clearTimeout(this.initTimer)
							this.initTimer = null
						}
						this.initTimer = setTimeout(() => {
							this.init()
						}, 300)
					}
				})
			},
			src (newVal) {
				this.$nextTick(function () {
					if ( newVal && this.visible ) {
						if ( this.initTimer ) {
							clearTimeout(this.initTimer)
							this.initTimer = null
						}
						this.initTimer = setTimeout(() => {
							this.init()
						}, 300)
					}
				})
			}
		}
	}
</script>

<style>
	.swiper-item .cover {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.2);
	}
	.top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	.tab {
		font-size: 32rpx;
		border-bottom-width: 2px;
		border-bottom-style: solid;
		padding: 10rpx 0;
	}
	.bottom-info {
		position: absolute;
		bottom: 50rpx;
		left: 0;
		right: 200rpx;
	}
	.detail {
		position: absolute;
		bottom: 300rpx;
		left: 0;
		right: 0;
	}
	.detail-btn {
		height: 60rpx;
		width: 200rpx;
	}
</style>